<template>
	<view style="padding: 24upx;background: #F5F5F9;height: 100vh;">
		<view class="card-container">
			<div class="title">选择礼品卡</div>
			<div class="cards-box">
				<div class="card-item-box" v-for="(card,cIdx) in cards" :key="cIdx">
					<div class="card-item" @click="nav2Detail">
						<view class="card-value">面值<span style="color: rgba(255,92,92,1.000000);">{{card.parValue}}</span>元</view>
						<view class="card-discount">优惠<span style="color: rgba(255,92,92,1.000000);">{{card.discount}}</span>元</view>
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	import { giftCardListApi } from '@/api/giftCard.js'
	export default {
		data() {
			return {
				cards: [
					{value: 100, discount: 2},
					{value: 200, discount: 5}
				]
			}
		},
		onLoad(options) {
			this.getData()
		},
		methods: {
			async getData() {
				let ret = await giftCardListApi()
				console.log("info");
				if (ret && ret.code==200) {
					ret.data.forEach(item=> {
						item.parValue = this.$api.toFixed(item.parValue)
						item.discount = this.$api.toFixed(item.discount)
					})
					this.cards = ret.data
				}
			},
			nav2Detail (){
				console.log(`/pages/giftcards/giftCardDetail`);
				uni.navigateTo({
					url: `/pages/giftcards/giftCardDetail`
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.card-container{
		background-color: #fff;
		border-radius: 16upx;
		padding: 24upx;
		.title {
			font-weight: bolder;
			font-size: 32upx;
			color: #23242e;
			line-height: 48upx;
			margin-bottom: 24upx;
		}
	}
	.cards-box{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: repeat(4,168upx);
		row-gap: 24upx;
		column-gap: 22upx;
	}
	.card-item-box {
	}
	.card-item{
		background: url('https://qiniu.dadaozhixing.top/dxx/pages/giftCards/gift-card-bg.png') no-repeat;
		background-size: 316upx 168upx;
		width: 316upx;
		height: 168upx;
		text-align: center;
		.card-value {
			height: 100upx;
			line-height: 100upx;
			font-weight: 500;
			font-size: 32upx;
			color: #6f3d1f;
		}
		.card-discount {
			height: 68upx;
			line-height: 68upx;
			font-size: 24upx;
			color: #6f3d1f;
		}
	}

</style>
